<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页三</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="__static/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="__static/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="__static/css/public.css" media="all">
    <style>
        .top-panel {
            border: 1px solid #eceff9;
            border-radius: 5px;
            text-align: center;
        }
        .top-panel > .layui-card-body{
            height: 60px;
        }
        .top-panel-number{
            line-height:60px;
            font-size: 30px;
            border-right:1px solid #eceff9;
        }
        .top-panel-tips{
            line-height:30px;
            font-size: 12px
        }
        .td-d{
            background-color: #ffb800;
            height: 60px; 
            color: #000;
        }
        .td_d2{
            position: absolute;
            width: 100%;
        }
        .ck{
            line-height: 22px;
            font-weight: bold;
            text-align: left;
            padding: 10px 15px;
        }
    </style>
</head>
<body>
<!--<div class="layuimini-container">-->
<div class="layuimini-main">

    <div class="layui-row layui-col-md12 layui-col-space15">
        <div class="layui-col-xs12 layui-col-md2">
            <div class="layui-card top-panel">
                <div class="layui-card-header" style="text-align: left;">月度统计
                	<span style="margin-top: 3%;" class="layui-badge layui-bg-blue  pull-right">月</span>
                </div>
                <div class="layui-card-body1" >
                    <div class="layui-row layui-col-space5">
                        <div class="">
                            <fieldset class="table-search-fieldset layuimini-container">
                                <legend>日期搜索</legend>
                                <form class="layui-form layui-form-pane" action="">
                                    <div class="layui-form-item" style="margin-bottom: 5px;">
                                        <div class="layui-inline">
                                            <div class="layui-input-inline">
                                                <input type="text" name="create_time" id="date" lay-verify="datetime" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </fieldset>
                            <table class="layui-hide" id="sj-left"></table>
                            <div class="layui-col-xs12 layui-col-md12">
                                <div class="layui-card top-panel">
                                    <div class="layui-card-header" style="text-align: left;">月度消耗参考
                                    </div>
                                    <div class="layui-card-body1" >
                                        <div class="layui-row layui-col-space5">
                                            <div class="ck">
                                               <p>消耗产出：<span id="xhcc">0</span>万</p>
                                               <p>运营人数：<span id="r-num">0</span>人</p>
                                               <p>人均消耗产出：<span id="r-avg">0</span>万</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-md10">
            <div class="layui-card top-panel">
                <div class="layui-card-header" style="text-align: left;">小组数据
                	<span style="margin-top: 1%;" class="layui-badge layui-bg-blue  pull-right">月</span>
                </div>
                <div class="layui-card-body1">
                    <div class="layui-row layui-col-space5">
                        <div class="">
                            <table class="layui-hide" id="xz-right"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-md10">
            <div class="layui-card top-panel">
                <div class="layui-card-header" style="text-align: left;">个人数据
                	<span style="margin-top: 1%;" class="layui-badge layui-bg-blue  pull-right">月</span>
                </div>
                <div class="layui-card-body1">
                    <div class="layui-row layui-col-space5">
                        <div class="">
                            <table class="layui-hide" id="gr-right"></table>
                        </div>
                       
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--</div>-->
<script src="__static/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="__static/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="__static/js/man.js" charset="utf-8"></script>
<script>
    var t = new Date().getTime();
	var $,layer,echarts,echarts_consume_top ,option_consume_top,table;
    layui.use(['layer', 'echarts','laydate','table'], function () {
        $ = layui.jquery, layer = layui.layer, echarts = layui.echarts,laydate = layui.laydate,table = layui.table;
        laydate.render({
            elem: '#date', //指定元素
            type: 'month',
            value: new Date(t),
            done: function(value){
                pageLoading();
			    table.reload('sj-left', {
				    url: '{:url("get_rw")}?t=json',
				    where:{time:value}
                });
                table.reload('xz-right', {
				    url: '{:url("get_xz_info")}?t=json',
				    where:{time:value}
                });
                table.reload('gr-right', {
				    url: '{:url("get_gr_info")}?t=json',
				    where:{time:value}
                });
                get_xh_ck(value);
            }
		});
        pageLoading();
        table.render({
            elem: '#sj-left',
            id:'sj-left',
            url: '{:url("get_rw")}?t=json',
            method : 'post',
            height: 'full-300',
            cols: [[
                {field:'username', title: '姓名'}
                ,{field:'yeji',title: '个人任务', sort: true}
            ]],
            loading:false,
			// done: function () {
            //     layer.close(loadingIndex);
            // }
        });
        table.render({
            elem: '#xz-right',
            id:'xz-right',
            url: '{:url("get_xz_info")}?t=json',
            method : 'post',
            where:{time:date("Y-m",t/1000)},
            
            cols: [[
                {field:'name', title: '小组'},
                {field:'num',title: '人数'},
                {field:'xh',title: '总消耗'},
                {field:'rw',title: '总任务'},
                {field:'yue_lv',title: '月达成率',templet: function(d){
					return '<div class="td-d" style="width: '+ d.yue_lv+'%;"><div class="td_d2">'+d.yue_lv+'%</div></div>'
				}},
                {field:'avg_xh',title: '日均消耗'},
                {field:'yesterday_xh',title: '昨日消耗'},
                {field:'yesterday_lv',title: '日达成率',templet: function(d){
					return '<div class="td-d" style="width: '+ d.yesterday_lv+'%;"><div class="td_d2">'+d.yesterday_lv+'%</div></div>'
				}},
            ]],
            loading:false,
			// done: function () {
            //     layer.close(loadingIndex);
            // }
           
        });
        table.render({
            elem: '#gr-right',
            id:'gr-right',
            url: '{:url("get_gr_info")}?t=json',
            method : 'post',
            where:{time:date("Y-m",t/1000)},
            cols: [[
                {field:'name', title: '小组', sort: true},
                {field:'username',title: '姓名'},
                {field:'xh',title: '总消耗', sort: true},
                {field:'rw',title: '总任务', sort: true},
                {field:'yue_lv',title: '月达成率',templet: function(d){
					return '<div class="td-d" style="width: '+ d.yue_lv+'%;"><div class="td_d2">'+d.yue_lv+'%</div></div>'
				}, sort: true},
                {field:'avg_xh',title: '日均消耗', sort: true},
                {field:'yesterday_xh',title: '昨日消耗', sort: true},
                {field:'yesterday_lv',title: '日达成率',templet: function(d){
					return '<div class="td-d" style="width: '+ d.yesterday_lv+'%;"><div class="td_d2">'+d.yesterday_lv+'%</div></div>'
				}, sort: true},
            ]],
            loading:false,
			done: function () {
                layer.close(loadingIndex);
            }
        });
        //获取消耗参考
        get_xh_ck();
        function get_xh_ck(tt=0){
            var t1 = tt==0?date("Y-m",t/1000):tt;
            $.post("{:url('get_xh_ck')}?t=json",{time:t1},function(data){
                if (data['code'] == 1) { 
                    $('#xhcc').html(data.data.xh)
                    $('#r-num').html(data.data.num)
                    $('#r-avg').html(data.data.avg)
                } else {
                    layer.msg(data['msg'], { icon : 5 });
                }
            })
        }
    });
    
   
</script>
</body>
</html>
